<template>
	<view class="pb-150">
		<!-- 顶部背景 + 导航 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill" />
		<u-navbar title="产品抽检信息" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />
		<!-- 日期选择器 -->
		<view class="w-710 mt-20 bgff pl-32 pr-32 br-20 mgt">
			<view class="rowsb rowsm h-104" style="border-bottom: 2rpx solid #f1f1f1;">
				<view>监测年份</view>
				<picker mode="date" fields="year" :value="yearValue" @change="onYearChange">
					<view class="fs-28" :class="selectedYear ? 'col333' : 'colbbb'">
						{{ selectedYear || '请选择年份' }}
					</view>
				</picker>
			</view>
			<!-- <view class="rowsb rowsm h-100 bor-b" @tap="showStatusPicker = true">
				<view>状态</view>
				
			</view> -->
		</view>
		<u-picker :show="showStatusPicker" :columns="statusColumns" @confirm="statusConfirm"
			@cancel="showStatusPicker = false" @close="showStatusPicker = false" />
		<view class="w-710 mgt bgff pl-32 pr-32 br-20 pt-20 pb-20 relative" v-for="(item, index) in list"
			:key="item.id">
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样编号</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleCode }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">抽样场所</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.detectionPlace }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">样品名称</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.product }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样时间</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.sampleTime }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">被抽样单位(个人)</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.ext3 }}</view>
			</view>
			<view class="rows rowsm h-58">
				<view class="fs-28 fw-500 col888 label">采样地区</view>
				<view class="fs-28 fw-500 col888 mr-10 ml-10">:</view>
				<view class="">{{ item.address }}</view>
			</view>
			<view class="w-100 h-58" style="position: absolute;right: 0;top: 20rpx;color: green;">
				{{ item.conclusion }}
			</view>
			<view style="display: flex;align-items: center;justify-content: flex-end;">
				<view class="w-132 h-52 colfff bg rowsc rowsm br-32" @click="godetail(item.id)">详情</view>
			</view>
		</view>

	</view>
</template>

<script>
import {choujianlist} from '@/api/sylin/index.js'
export default {
	data() {
		return {
			list: [],
			id: '',
			index: '',
			time: '',
			selectedYear: '', // 选中的年份
			showStatusPicker: false,
			statusColumns: [
				['合格', '不合格']
			]
		};
	},
	onLoad(options) {
		this.index = options.index
		this.getchoujianlist(options.id, options.city)
	},
	methods: {
		confirmTime(e) {
			this.time = e.detail.value;
		},
		onYearChange(e) {
			const y = String(e?.detail?.value || '').split('-')[0] || '';
			this.selectedYear = y;
			// 选择年份后，可以根据需要重新加载数据
			// this.getchoujianlist(this.id, this.index, this.status);
		},
		statusConfirm(e) {
			this.showStatusPicker = false;
			this.status = e.value[0];
		},
		async godetail(id) {
			uni.navigateTo({
				url: `/pages/workbench/01task/cydetail/cydetail?id=${id}`
			})
		},
		async getchoujianlist(oldId, productId, status) {
			const res = await choujianlist({
				pageNum: 1,
				pageSize: 99999,
				status: status
			})
			console.log(res, 'reschoujianlist')
			this.list = res.rows
		}
	},
	computed: {
		navbarHeight() {
			// 如果设置了自定义高度，则使用自定义高度
			if (this.customNavbarHeight) {
				return this.customNavbarHeight;
			}
			// 否则自动计算：状态栏高度 + 导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 将px转换为rpx (1px = 2rpx)
			const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
			const navbarHeightRpx = 44 * 2; // 44px = 88rpx
			return statusBarHeightRpx + navbarHeightRpx;
		},
		yearValue() {
			const y = this.selectedYear || new Date().getFullYear().toString();
			return `${y}-01-01`;
		}
	}
}
</script>

<style lang="scss">
$green: #0A993B;
$green-2: #23a44b;
$line: #E5F3EA;
$gray: #999;

.tongguo {
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;

	.tg {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: green;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.bh {
		width: 40%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: red;
		height: 80rpx;
		border-radius: 40rpx;
	}
}

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: 1;
}

/* 驳回弹窗样式 */
.reject-modal {
	width: 650rpx;
	background: #fff;
	border-radius: 14rpx;
	overflow: hidden;
}

.reject-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 28rpx 12rpx;
	border-bottom: 1rpx solid $line;
}

.reject-header .title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.reject-body {
	padding: 20rpx 28rpx;
}

.form-item {
	margin-bottom: 18rpx;
}

.label {
	display: inline-block;
	font-size: 26rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.label.required::before {
	content: '*';
	color: #f56c6c;
	margin-right: 6rpx;
}

.picker-input {
	height: 88rpx;
	border: 1rpx solid $line;
	border-radius: 10rpx;
	padding: 0 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.picker-text {
	color: #333;
	font-size: 28rpx;
}

.picker-text.placeholder {
	color: #bbb;
}

.col333 {
	color: #333;
}

.colbbb {
	color: #bbb;
}

.reject-footer {
	display: flex;
	gap: 16rpx;
	padding: 10rpx 28rpx 24rpx;
}

/* 下拉列表样式 */
.type-item {
	position: relative;
}

.dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: 140rpx;
	background: #fff;
	border: 1rpx solid $line;
	border-radius: 10rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
	z-index: 20;
	max-height: 300rpx;
	overflow: auto;
}

.dropdown-item {
	padding: 22rpx 24rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dropdown-item+.dropdown-item {
	border-top: 1rpx solid $line;
}

.di-text {
	font-size: 28rpx;
	color: #333;
}
</style>